<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			body{
				margin: 0;
			}
			img{
				margin: 0 auto;
				width: 100%;
			}
			#bg_img{
				width: 100%;
			}
			#qrcode{
				width: 44%;
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<div class="bg_invite">
			<div id="bg_img">
				<img src="/Public/Api/images/invitation.jpg">
			</div>
			<div id="qrcode">
				<img src="{$qrcode_url}">
			</div>
		</div>

		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			setPosition();
			window.onresize = function(){
				setPosition();
			}
			var timer;
			function setPosition(){
				timer = setInterval(function() {
					var screen_height = $(window).height();
					var bg_height = $("#bg_img").height();
					$("#qrcode").css('margin-top',-(bg_height * 0.52) + "px");
                    clearInterval(timer);
	            }, 50)	
			}
		</script>
	</body>

</html>